// START Top Navbar
nav.navbar.topnavbar(role='navigation')
    // START navbar header
    .navbar-header
      a.navbar-brand(href='#/') 
        .brand-logo 
          img.img-responsive(src="img/logo.png", alt="App Logo")
        .brand-logo-collapsed 
          img.img-responsive(src="img/logo-single.png", alt="App Logo")
    // END navbar header

    // START Nav wrapper
    .nav-wrapper
      // START Left navbar
      ul.nav.navbar-nav
        li
          // Button used to collapse the left sidebar. Only visible on tablet and desktops
          a(href='#', data-toggle-state="aside-collapsed").hidden-xs
            em.fa.fa-navicon
          // Button to show/hide the sidebar on mobile. Visible on mobile only.
          a(href='#', data-toggle-state="aside-toggled", data-no-persist="true").visible-xs.sidebar-toggle
            em.fa.fa-navicon
        // START User avatar toggle
        li
          // Button used to collapse the left sidebar. Only visible on tablet and desktops
          a#user-block-toggle(href='#user-block', data-toggle="collapse")
            em.icon-user
        // END User avatar toggle
        // START lock screen
        li
          a(href="lock.html", title="Lock screen")
            em.icon-lock
        // END lock screen
      // END Left navbar

      // START Right Navbar
      ul.nav.navbar-nav.navbar-right
        // Search icon
        li
          a(href='#', data-search-open="")
            em.icon-magnifier
        // Fullscreen (only desktops)
        li.visible-lg
          a(href='#', data-toggle-fullscreen="")
            em.fa.fa-expand
        // START Alert menu
        li.dropdown.dropdown-list
          a(href="#", data-toggle="dropdown")
            em.icon-bell
            .label.label-danger 11
          // START Dropdown menu
          ul.dropdown-menu(class="animated flipInX")
            li
              // START list group
              .list-group
                // list item
                a.list-group-item(href='#')
                  .media-box
                    .pull-left
                      em.fa.fa-twitter.fa-2x.text-info
                    .media-box-body.clearfix
                        p.m0 New followers
                        p.m0.text-muted: small 1 new follower
                // list item
                a.list-group-item(href='#')
                  .media-box
                    .pull-left
                      em.fa.fa-envelope.fa-2x.text-warning
                    .media-box-body.clearfix
                        p.m0 New e-mails
                        p.m0.text-muted: small You have 10 new emails
                // list item
                a.list-group-item(href='#')
                  .media-box
                    .pull-left
                      em.fa.fa-tasks.fa-2x.text-success
                    .media-box-body.clearfix
                        p.m0 Pending Tasks
                        p.m0.text-muted: small 11 pending task

                // last list item 
                a.list-group-item(href='#')
                  small More notifications
                  span.label.label-danger.pull-right 14
              // END list group
          // END Dropdown menu
        // END Alert menu
        // START Offsidebar button
        li
          a(href='#', data-toggle-state="offsidebar-open", data-no-persist="true")
            em.icon-notebook
        // END Offsidebar menu
      // END Right Navbar
    // END Nav wrapper
    
    // START Search form
    form.navbar-form(role='search', action="search.html")
      .form-group.has-feedback
        input.form-control(type='text', placeholder="Type and hit enter ...")
        .fa.fa-times.form-control-feedback(data-search-dismiss="")
      button.hidden.btn.btn-default(type='submit') Submit
    // END Search form

// END Top Navbar